﻿<%@ Page Language="C#" MasterPageFile="~/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Toolkit.Web.Examples.Button.Index" %>
<%@ Import Namespace="Toolkit.Web" %>
<%@ Import Namespace="Toolkit.Web.ViewComponents" %>
<%@ Import Namespace="Toolkit.Web.ViewComponents.Button" %>

<asp:Content ContentPlaceHolderID="Title" runat="server">
    Buttons
</asp:Content>

<asp:Content ContentPlaceHolderID="StyleSheetIncludes" runat="server">
    <link href="/Content/StyleSheets/Button.css" rel="stylesheet" />
    <style>
		.icon-add,
		.icon-add .vc-icon
		{
			background-image: url(http://jqueryui.com/themeroller/images/?new=222222&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png);
			background-position: -32px -128px;
		}
		.icon-arrow-down
		{
			background-image: url(http://jqueryui.com/themeroller/images/?new=222222&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png);
		    background-position: -64px -16px;
		}
    </style>
</asp:Content>

<asp:Content ContentPlaceHolderID="PageContent" runat="server">

    <div class="section">
        <h2>Buttons Without Menus</h2>
        
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("Title")%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" })%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add" })%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" })%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add" })%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })%>

        <br />
        <br />

        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" })%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" })%>
    </div>

    <div class="section">
        <h2>Drop Down Buttons</h2>
    
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add", @title = "top" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add", @title = "right" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add", @title = "bottom" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add", @title = "left" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add", @title = "top" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add", @title = "right" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add", @title = "bottom" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add", @title = "left" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>

        <br />
        <br />
    
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add", @title = "top" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add", @title = "right" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add", @title = "bottom" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add", @title = "left" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add", @title = "top" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add", @title = "right" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add", @title = "bottom" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add", @title = "left" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>

        <br />
        <br />
    
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().DropDownButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>

    </div>

    <div class="section">
        <h2>Split Buttons</h2>
    
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add", @title = "top" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add", @title = "right" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add", @title = "bottom" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add", @title = "left" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add", @title = "top" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add", @title = "right" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add", @title = "bottom" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add", @title = "left" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>

        <br />
        <br />
    
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add", @title = "top" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add", @title = "right" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add", @title = "bottom" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add", @title = "left" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add", @title = "top" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add", @title = "right" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add", @title = "bottom" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add", @title = "left" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Right, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>

        <br />
        <br />
    
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("Title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>

    </div>

    <div class="section">
        <h2>Default Buttons</h2>
        <%
            this.Toolkit().Button(new { @class = "icon16x16" })
                .Title("Do Nothing").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .Render();
            
            this.Toolkit().Button(new { @class = "icon16x16", @onclick = "alert('clicked!');" })
                .Title("On Click").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .Render();
            
            this.Toolkit().Button(new { @class = "icon16x16" })
                .Title("Event Handler").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .ClientEventHandlers(handlers =>
                {
                    handlers.OnBeforePrimaryAction = "onBeforePrimaryAction";
                })
                .Render();
            
            this.Toolkit().SplitButton(new { @class = "icon16x16" })
                .Title("Do Nothing").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();
            
            this.Toolkit().SplitButton(new { @class = "icon16x16", @onclick = "alert('clicked!');" })
                .Title("On Click").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();
            
            this.Toolkit().SplitButton(new { @class = "icon16x16" })
                .Title("Event Handlers").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .ClientEventHandlers(handlers =>
                {
                    handlers.OnBeforePrimaryAction = "onBeforePrimaryAction";
                    handlers.OnBeforeHideMenu = "onBeforeHideMenu";
                    handlers.OnBeforeShowMenu = "onBeforeShowMenu";
                })
                .Render();
            
            this.Toolkit().SplitButton(new { @class = "icon16x16" })
                .Title("Disabled").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .ClientEventHandlers(handlers =>
                {
                    handlers.OnBeforePrimaryAction = "onBeforePrimaryAction";
                    handlers.OnBeforeHideMenu = "onBeforeHideMenu";
                    handlers.OnBeforeShowMenu = "onBeforeShowMenu";
                })
                .Enable(false)
                .Render();
        %>
    </div>

    <div class="section">
        <h2>Link Buttons</h2>
        <%
            this.Toolkit().LinkButton("http://www.google.com", new { @class = "icon16x16" })
                .Title("Google").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .Render();
            
            this.Toolkit().LinkButton("http://www.google.com", new { @class = "icon16x16" })
                .Title("Prevent Action").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .ClientEventHandlers(handlers =>
                {
                    handlers.OnBeforePrimaryAction = "onBeforePrimaryAction";
                })
                .Render();

            this.Toolkit().LinkButton("http://www.google.com", "_blank", new { @class = "icon16x16" })
                .Title("Google (new tab)").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .Render();
            
            this.Toolkit().LinkButton("#bottomLink", new { @class = "icon16x16" })
                .Title("Scroll To Bottom").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .Render();
            
            this.Toolkit().SplitLinkButton("http://www.google.com", new { @class = "icon16x16" })
                .Title("Google").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();
            
            this.Toolkit().SplitLinkButton("http://www.google.com", new { @class = "icon16x16" })
                .Title("Prevent Action").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .ClientEventHandlers(handlers =>
                {
                    handlers.OnBeforePrimaryAction = "onBeforePrimaryAction";
                })
                .Render();

            this.Toolkit().SplitLinkButton("http://www.google.com", "_blank", new { @class = "icon16x16" })
                .Title("Google (new tab)").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();
            
            this.Toolkit().SplitLinkButton("#bottomLink", new { @class = "icon16x16" })
                .Title("Scroll To Bottom").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();
            
            this.Toolkit().SplitLinkButton("#bottomLink", new { @class = "icon16x16" })
                .Title("Disabled").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Enable(false)
                .Render();
        %>
    </div>

    <div class="section">
        <h2>Drop Down Buttons</h2>
        <%
            this.Toolkit().DropDownButton(new { @class = "icon16x16" })
                .Title("Default").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();
            
            this.Toolkit().DropDownButton(new { @class = "icon16x16" })
                .Title("Prevent Default").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .ClientEventHandlers(handlers =>
                {
                    handlers.OnBeforePrimaryAction = "onBeforePrimaryAction";
                })
                .Render();
            
            this.Toolkit().DropDownButton(new { @class = "icon16x16" })
                .Title("Event Handlers").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .ClientEventHandlers(handlers =>
                {
                    handlers.OnBeforeHideMenu = "onBeforeHideMenu";
                    handlers.OnBeforeShowMenu = "onBeforeShowMenu";
                })
                .Render();
            
            this.Toolkit().DropDownButton(new { @class = "icon16x16" })
                .Title("Disabled").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Enable(false)
                .Render();
        %>
    </div>

    <div class="section">
        <h2>Input Buttons</h2>
        <input type="hidden" name="isFormRequest" value="true" />
        <%
            this.Toolkit().SubmitButton(new { @class = "icon16x16" })
                .Title("Submit").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .Render();

            this.Toolkit().SubmitButton(new { @class = "icon16x16" })
                .Title("Prevent Action").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .ClientEventHandlers(handlers =>
                {
                    handlers.OnBeforePrimaryAction = "onBeforePrimaryAction";
                })
                .Render();
                
            this.Toolkit().SubmitButton("action", "cancel", new { @class = "icon16x16" })
                .Title("Cancel").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .Render();

            this.Toolkit().SplitSubmitButton(new { @class = "icon16x16" })
                .Title("Submit").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();

            this.Toolkit().SplitSubmitButton(new { @class = "icon16x16" })
                .Title("Prevent Action").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .ClientEventHandlers(handlers =>
                {
                    handlers.OnBeforePrimaryAction = "onBeforePrimaryAction";
                })
                .Render();

            this.Toolkit().SplitSubmitButton(new { @class = "icon16x16" })
                .Title("Disabled").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Enable(false)
                .Render();

            this.Toolkit().SplitSubmitButton("action", "cancel", new { @class = "icon16x16" })
                .Title("Cancel").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();
        %>
    </div>

    <div class="section">
        <h2>Menus</h2>
        <%
            this.Toolkit().DropDownButton(new { @class = "icon16x16" })
                .Title("Single").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();
            
            this.Toolkit().DropDownButton(new { @class = "icon16x16" })
                .Title("Single (Large)").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.HtmlAttributes(new { style = "max-height:100px;" });
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();
            
            this.Toolkit().DropDownButton(new { @class = "icon16x16" })
                .Title("Multiple").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" })
                .SecondaryIcon(ButtonDisplay.Right, new { @class = "icon-arrow-down" })
                .Menu(builder =>
                {
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                    builder.AddMenuSection(secBuilder =>
                    {
                        secBuilder.HtmlAttributes(new { style = "max-height:100px;" });
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.google.com/'>Google</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.yahoo.com/'>Yahoo</a>");
                        secBuilder.AddItem(writer => "<a href='http://www.facebook.com/'>Facebook</a>");
                    });
                })
                .Render();
        %>
    </div>

    <div class="section">
        <h2>Miscellaneous</h2>
        <%:this.Toolkit().Button().Title("Title (no wrapper class)")%>
        <%:this.Toolkit().Button().Title("Disabled").Enable(false)%>
        <%:this.Toolkit().Button().Title("i")%>

        <br />
        <br />
    
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("Title (with wrapper class 16x16)")%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("Disabled").Enable(false)%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("i")%>

        <br />
        <br />

        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("i").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" })%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("i").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("i").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("i").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("i").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("i").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>

        <br />
        <br />

        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("This is very long button title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" })%>
        <%:this.Toolkit().Button(new { @class = "icon16x16" }).Title("This is very long button title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("This is very long button title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("This is very long button title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Left, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("This is very long button title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("This is very long button title").PrimaryIcon(ButtonDisplay.Left, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Bottom, new { @class = "icon-arrow-down" })%>

        <br />
        <br />
    
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("i").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("i").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("This is very long button title").PrimaryIcon(ButtonDisplay.Top, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
        <%:this.Toolkit().SplitButton(new { @class = "icon16x16" }).Title("This is very long button title").PrimaryIcon(ButtonDisplay.Bottom, new { @class = "icon-add" }).SecondaryIcon(ButtonDisplay.Top, new { @class = "icon-arrow-down" })%>
    </div>

    <div style="margin-top:900px;">
        <a name="bottomLink">Scroll to Here</a> -
        <a href="#">Go to Top</a>
    </div>

</asp:Content>

<asp:Content ContentPlaceHolderID="JavaScriptIncludes" runat="server">
    <script src="/Scripts/jqkit.min.js"></script>
    <script src="/Scripts/jqkit.components.min.js"></script>
    <script>
        function onBeforeHideMenu() {
            try { console.log('before hide menu - ' + $(this).attr('data-vc-id')); } catch(error) {};
        }
        function onBeforeShowMenu() {
            try { console.log('before show menu - ' + $(this).attr('data-vc-id')); } catch(error) {};
        }
        function onBeforePrimaryAction() {
            try { console.log('before primary action - ' + $(this).attr('data-vc-id')); } catch(error) {};
            return false;
        }
    </script>
</asp:Content>
